<template>
    <div class="login">
        <div class="loginForm">
            <div class="formHeader">
                <img src="/avatar.jpg" />
                <text class="title">欢迎光临 PostGraduateForF</text>
                <div class="content">愿许清风知我意，散我心中意难平。</div>
                <!-- <div class="content">{{ copyWritingList }}</div> -->
            </div>
            <el-form ref="ruleFormRef" :model="loginForm" status-icon label-width="auto">
                <div class="input">
                    <el-input v-model="loginForm.phone" placeholder="请输入手机号" />
                    <text v-if="errorPhone" class="errorPhone">请输入正确的手机号码</text>
                    <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" />
                    <text v-if="errorPassword" class="errorPassword">密码长度为6-16位</text>
                </div>
            </el-form>

            <el-button type="primary" @click="submitLoginForm">登录</el-button>
        </div>
        <div class="copyWriting">
            {{ copyWritingList }}
        </div>
    </div>
</template>

<script setup>
import store from '@/store';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { copyWritingSw } from '../../server/otherApi/copyWriting';
import { login } from '../../server/userApi';
import router from '../../src/router';

const ruleFormRef = ref();
// 表单的验证
const loginForm = reactive({
    phone: '',
    password: '',
});


const copyWritingList = ref(null);

// 后续从后端获得数据
const userinfo = ref({});

const errorPhone = ref(false);
const errorPassword = ref(false);
const phoneTest = "/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/";
const submitLoginForm = async () => {

    // 对表单的数据进行验证
    if (!loginForm.phone.match(phoneTest.value)) {
        errorPhone.value = true;
        return
    }


    // 请求登录接口
    const result = await login(loginForm);
    console.log(result);
    if (result.code === 1265502) {
        return ElMessage.error(result.message);
    }
    userinfo.value = result.data;

    // 理论上，我们这里只需要将文件存入vuex即可，但是实际工作当中，我们需要将文件存入到localStorage中
    // 1. 获取用户信息
    // 2. 将用户信息存入到localStorage中
    // 3. 将用户信息存入到vuex中

    // 咨询ai提供了更好的解方法
    // localStorage.setItem('userInfo', JSON.stringify(userinfo.value));
    store.dispatch('login', userinfo.value);


    // 保存用户的基本信息到vuex
    // store.commit('changeUserInfo', userinfo.value);


    router.push('/');
};

// 生命周期调用
onMounted(async () => {
    const result = await copyWritingSw();
    // const resultWy = await copyWritingWy();
    copyWritingList.value = result;
    // copyWritingWyList.value = resultWy;
});
const resetForm = () => {
    loginForm.phone = '';
    loginForm.password = '';
};
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    background: url('/img/1.jpg') no-repeat;
    background-size: cover;

    .loginForm {
        width: 400px;
        margin-top: 150px;

        .formHeader {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img,
            .title,
            .content {
                margin-bottom: 20px;
            }

            img {
                width: 100px;
                border-radius: 50%;
            }

            .title {
                font-size: 24px;
            }

            .content {
                font-size: 16px;
            }
        }

        .el-form {
            width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .input {
                width: 400px;

                .el-input {
                    margin-bottom: 10px;

                    /* 穿透 */
                    :deep(.el-input__wrapper) {
                        background-color: rgba($color: #585757, $alpha: 0.3);
                        box-shadow: none;
                        border-radius: 30px;
                        padding: 8px;

                        &:hover {
                            background: rgba($color: #dbd8d8, $alpha: 0.4);
                        }
                    }

                    :deep(.el-input__inner) {
                        font-size: 16px;
                        margin-left: 10px;
                        color: black;

                        &::placeholder {
                            color: aqua;
                        }
                    }
                }
            }
        }
    }

    .copyWriting {
        position: absolute;
        width: 200px;
        left: 180px;
        top: 200px;
    }
}
</style>
